@charset "utf-8";
/* CSS Document */

		body {
			background-color:#FFDDB6;
			font-family: "Edu TAS Beginner", cursive; 
			font-size: 20px;
			margin-right: 5%;
			margin-left: 5%;
			padding: 16px;
		}
		h1{
			text-transform: uppercase;
			color: #370000;
			font-size: 50px;
		}
		
		h1, h2{font-family:"Poetsen One", sans-serif;
  			font-weight: 400;
  			font-style: normal;
			text-align: center;
		}
		h2{
			color:#502B14
		}
		h3{
			color:#662300
		}
		h4{
			color:#662300;
			font-size: 28px;
			text-align: justify;
			align-content: center;
		}
		h5{
			color:#431700;
			font-size: 28px;
		}
		h6{
			color:#431700;
			font-size: 28px;
		}
		p, ul{
			font-family: "Edu TAS Beginner", cursive; 
			font-size: 25px
		}
		
		img[alt="img right"] {
			border: 5px solid #F8ACAC;
			margin-right:2%;
			margin-bottom: 2%;
			float:right;
			align-content: center;
			display: grid;
			grid-template-columns: auto;
			column-gap: normal;
			border-radius: 5px
		}
		form{
			text-align: center;
			width: 50%;
			margin: 0 auto; 
		}
		input{
			background-color: #FFD1D1;
			border-color: #FA4F4F;
		}
		input[type=text] {
			width: 70%;
			padding: 10px 10px;
			margin: 4px;
			box-sizing: border-box;
			border: 1px solid #FA4F4F;
			background-color: #FFD1D1;
			border-radius: 5px;
			color: #8C4D2C;
		}
		input[type=text]:focus {
			border: 3px solid #FA4F4F;
		}
		input[type=submit] {
			order: 1px solid #FA4F4F;
			background-color: #FFD1D1;
			border-radius: 5px;
			color: #8C4D2C;
		}
		textarea {
			width:70%;
			height: 100px;
			padding: 10px 10px;
			box-sizing: border-box;
			border: 1px solid #FA4F4F;
			background-color: #FFD1D1;
			font-size: 16px;
			resize: none;
			border-radius: 5px;
			color: #8C4D2C;
		}
		.center{
			display: block;
			margin-left:auto;
			margin-right: auto;
		}
		.text{
			float: left;
		}
		.topimg{
			border: 5px solid #F8ACAC;
			margin-right:2%;
			margin-bottom: 2%;
			float:left;
			align-content: center;
			display: grid;
			grid-template-columns: auto;
			column-gap: normal;
			border-radius: 5px
		}
		.toptext{
			float: right;
		}
		.image-container{
			position: relative;
			text-align: center;
			
		}
		.shape{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.button {
			border: solid #FA4F4F;
			text-align: center;
			display:inline-block;
			font-size: 15px;
			cursor: pointer;
			margin: 4px 2px;
			padding-bottom: 10px;
			padding-top: 10px;
			padding-right: 20px;
			padding-left: 20px;
			font-family: "Actor", sans-serif;
			transition-duration: 0.4s;
			background-color: #F8ACAC;
			color: #662300;
			float: right;
			border-radius: 30px
		}
		.navi {
			overflow:hidden;
			background-color: #FA4F4F;
		}
		.navi a {
			float: left;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
			display: block;
		}
		.navi a:hover {
			background-color: #FA4F4F;
			color: black;
		}
		.navi a.active {
			background-color: #FFDAD1;
			color: #C55050;
			width: 30%;
			border-top-width: 10px;
			text-align: center
		}
		.sticky{
			position: fixed;
			top: 0;
			width: 100%;
		}
		.form{
			background-color: #F8ACAC;
			border: solid #FA4F4F;
			padding: 10px;
			border-top-width: 20px;
			border-radius: 10px;
			text-align: center;
			place-items: center;
			width: 30%;
			position: absolute;
			left: 50%;
			transform: translate(-50%, -50%);
		}